<!DOCTYPE html>
<html>
<head>
	<title>Test Animation</title>
	<style type="text/css">
		



#bg-change {
 width: 100px;
 height: 100px;
 background: red;
}

#bg-change::before {
    content: " ";
    background: blue;
    opacity: 0;
    transition: opacity 0.4s;
    width: 100px;
    height: 100px;
    display: block;
}

#bg-change:hover::before {
 opacity: 1;
}
	</style>
</head>
<body onload="measureCRP()">

<div id="bg-change">teee</div>
 <p>Hello <span>web performance</span> students!</p>
<script type="text/javascript">
     function measureCRP() {
        var t = window.performance.timing,
          interactive = t.domInteractive - t.domLoading,
          dcl = t.domContentLoadedEventStart - t.domLoading,
          complete = t.domComplete - t.domLoading;
        var stats = document.createElement('p');
        stats.textContent = 'interactive: ' + interactive + 'ms, ' +
            'dcl: ' + dcl + 'ms, complete: ' + complete + 'ms';
        document.body.appendChild(stats);
      }

</script>
</body>
</html>